<template>
  <div class="full-page-6">
    <h1 class="text-white text-2xl text-center py-6 lg:text-4xl lg:py-10" :class="{'enter':active,'leave':!active}" >{{t('page6.title')}}</h1>
    <div  class="full-page-6-text pl-3 lg:w-1/2 lg:m-auto" >
      <div class=" text-white text-base line-clamp-1 max-w-9/10 py-2 lg:text-2xl" v-for="(github, index) in 6" :key="index" :class="{'enter':active,'leave':!active}">
        {{ t(`page6.name[${index}]`) }}
        <a class="text-xs text-blue-400 break-all lg:text-xl" :href="t(`page6.href[${index}]`)" target="_blank">{{t(`page6.href[${index}]`)}}</a>
      </div>
    </div>
    <el-image :src="useAssets('images/png/section10.jpg')" fit="cover" class="bg-image" lazy></el-image>
  </div>
</template>
<script setup name="fullPage6">
import { useAssets } from '@/utils';

const props = defineProps({
  index: {
    type: Number,
    default: 0
  }
});
const { t } = useI18n();

const active = computed(() => props.index === 5);
</script>
<style lang="scss" scoped>
h1 {
  &.enter{ animation: rubberBand 1.5s;}
  &.leave{ animation: fadeOut 1s; }
}
.full-page-6-text{
  @for $i from 1 through 6 {
      &>div:nth-of-type(#{$i}){
        &.enter{ animation: slideInLeft 1.5s $i*0.08+s;}
        &.leave{ animation: slideOutLeft 1s $i*0.06+s; }
      }
  }
}
</style>
